<template>
  <div class="task">
    <div class="taskTop">
      <div class="title">行为决策实验平台</div>
      <div class="phase">
        <el-row style="height: 100%">
          <el-col :span="4"></el-col>
          <el-col
              :span="16"
              style="display: flex; align-items: center; height: 100%">
            <span style="margin-right: 50px">第3场</span>
            <span style="margin-right: 50px" >实验阶段：第1阶段</span>
            <span>实验桌号： {{ $store.state.seatID }}号</span>
          </el-col>
          <el-col :span="4"></el-col>
        </el-row>
      </div>
    </div>
    <div class="taskMain">
      <el-row style="height: 100%">
        <el-col :span="4" style="height: 100%"></el-col>
        <el-col :span="16" style="height: 100%">
          <div class="mainTask">
            <el-row style="height: 100%">
              <el-col
                  :span="8"
                  style="
                  display: flex;
                  align-items: center;
                  height: 100%;
                  font-size: 20px;
                  color: #3360ec;
                  font-weight: 600;">投资任务进度：{{$store.state.currentRound}}/12</el-col
              >
              <el-col :span="8"
              ><div class="grid-content ep-bg-purple-light"
              /></el-col>
              <el-col
                  :span="8"
                  style="
                  display: flex;
                  align-items: center;
                  height: 100%;
                  justify-content: flex-end;
                  font-size: 20px;">当前实验周期剩余时间：
                <span style="font-size: 28px; font-weight: 600; color: #3360ec"
              ><a-countdown :value="$store.state.rest_Time" /></span></el-col>
            </el-row>
          </div>
          <div class="mainCard">
            <el-row :gutter="12" style="height: 100%">
              <el-col :span="8">
                <el-card
                    shadow="always"
                    style="height: 70%; border-radius: 10px; width: 85%">
                  <div
                      class="postNum"
                      style="
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      font-weight: 600;
                      font-size: 19px;">
                    <el-icon color="#165dff" :size="25" ><TrendCharts /></el-icon>
                    基金 Ⅰ
                  </div>
                  <div class="postName" style="padding: 1em;font-size: 15px">拟任基金经理LJW
                    <a-button type="primary" @click="showFund1" shape="round">查看</a-button>
                  </div>

                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card
                    shadow="always"
                    style="height: 70%; width: 85%; border-radius: 10px">
                  <div
                      class="postNum"
                      style="
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      font-weight: 600;
                      font-size: 19px;">
                    <el-icon color="#73d13d" :size="25" ><TrendCharts /></el-icon>
                    基金 Ⅱ
                  </div>
                  <div class="postName" style="padding: 1em;font-size: 15px">拟任基金经理LJW
                    <a-button type="primary" @click="showFund2" shape="round">查看</a-button>
                  </div>

<!--                  <div style="float: right;padding-right: 1em">-->
<!--                   -->
<!--                  </div>-->
                </el-card> </el-col>
              <el-col :span="8">
              <el-card
                  shadow="always"
                  style="height: 70%; border-radius: 10px; width: 85%">
                <div
                    class="postNum"
                    style="
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      font-weight: 600;
                       font-size: 19px;">
                  <el-icon color="#ffc53d " :size="25"><TrendCharts /></el-icon>
                  基金 Ⅲ
                </div>
                <div class="postName" style="padding: 1em;font-size: 15px">拟任基金经理LJW
                  <a-button type="primary" @click="showFund3" shape="round">查看</a-button>
                </div>
              </el-card>
            </el-col>
            </el-row>
          </div>
          <div class="mainWord">
            <p  style="font-size: 24px; font-weight: 450; padding: 0; margin: 0;text-align: center;justify-content: center;padding-bottom: 30px;padding-top: 30px">
              请您决定是否查看本轮市场价格走势?
            </p>
          <div class="mainBtn">
            <el-button @click="nextBtn" type="primary">不查看</el-button>
          </div>
          </div>
        </el-col>
        <el-col :span="4" style="height: 100%"></el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import CProgress from './../components/c-progress'
import { TrendCharts} from "@element-plus/icons";
export default {
  name: 'IsShowMarket',
  components: {
    // eslint-disable-next-line
    CProgress,
    TrendCharts
  },
  data() {
    return {

    }
  },

  mounted() {

  },

  watch: {

  },

  methods: {

    showFund1(){
      // this.$router.push({ name: 'ShowLineChart' })
      this.$router.push({path: '/showLineChart', query: {showIndex: 1}});
    },
    showFund2(){
      this.$router.push({path: '/showLineChart', query: {showIndex: 2}});
    },

    showFund3(){
      this.$router.push({path: '/showLineChart', query: {showIndex: 3}});
    },


    nextBtn() {
      //点击 不查看   轮数++
      this.$router.push({ name: 'TaskOne' })
    },
  }
}
</script>

<style lang="scss" scoped>
.task {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  .taskTop {
    width: 100%;
    height: 15%;

    .title {
      width: 100%;
      height: 60%;
      font-size: 58px;
      letter-spacing: 10px;
      font-weight: 700;
      color: aliceblue;
      background-color: #0b45b0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .phase {
      width: 100%;
      height: 40%;
      border: 1px solid rgb(185, 185, 185);
    }
  }
  .taskMain {
    width: 100%;
    height: 85%;
    .mainTask {
      width: 100%;
      height: 8%;
    }
    .mainCard {
      width: 100%;
      height: 20%;
      .row {
        .el-col {
          .el-col-8 {
            .is-guttered {
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }
      }

    }
    .mainWord {
      width: 100%;
      height: 10%;
    }
    .mainSlider {
      width: 100%;
      height: 50%;
      .jj1 {
        width: 100%;
        height: 33.33%;
        display: flex;
        align-items: center;
        .slider1 {
          width: 80%;
          border: 1px solid rgb(182, 176, 176);
          padding: 20px 20px;
        }
      }
    }
    .mainBtn {
      width: 100%;
      height: 120%;
      display: flex;
      justify-content: center;
      align-items: center;
      .el-button {
        width: 20%;
        height: 44%;
        background-color: #0b5aff;
      }
    }
  }
}
</style>